<template>
  <view class="store-list">
    <view class="store-item" v-for="item in storeList" :key="item.id">
      <!-- <view class="store-item-name"> {{ item.name }} - {{ item.address }} </view> -->
      <view class="store-item-shops">
        <view class="store-item-shop" v-for="shop in item.store" :key="shop.id">
          <view class="store-item-shop-name">
            <text>{{ item.name }} - {{ shop.name }}</text>
            <button
              type="primary"
              size="mini"
              :disabled="shop.id == storeInfo.shop.id"
              @click="checkStore(item, shop)"
            >
              去租赁
            </button>
          </view>
          <view class="store-item-shop-info">
            <view>
              <view
                class="store-item-shop-text"
                @tap="$xyfun.to('/pages/store/detail?store_id=' + shop.id)"
              >
                <view class="store-item-shop-text-item">
                  <text>开放时间：</text>
                  <text>{{ shop.businesshours }}</text>
                </view>
                <view class="store-item-shop-text-item">
                  <text>距离：</text>
                  <text>{{ shop.distance }}</text>
                </view>
                <view class="store-item-shop-text-item">
                  <text>地址：</text>
                  <text>{{ shop.address }}</text>
                </view>
              </view>
            </view>
            <text class="m-l-auto xyicon icon-right m-t-60" :style="css.tcl"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import xyTabbar from "@/components/xy-tabbar";
export default {
  components: {
    xyTabbar,
  },
  data() {
    return {
      css: {},
      deviceList: [],
      location: {
        latitude: 0,
        longitude: 0,
      },
      storeList: [],
    };
  },
  onPullDownRefresh() {
    this.getLocation();
  },

  onLoad() {
    this.css = this.$xyfun.css();
    this.getLocation();
  },
  methods: {
    /**
     * 获取当前定位信息
     * 成功后调用getStoreList获取门店列表
     */
    getLocation() {
      let that = this;
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          that.location = res;
          that.getStoreList();
        },
        fail: function (err) {
          console.log(err);
          that.location = "获取位置失败";
        },
      });
    },

    /**
     * 获取门店列表
     * 根据当前定位信息请求后端接口
     * 成功后调用getStoreInfo获取当前选中的门店
     */
    getStoreList() {
      let that = this;
      this.$api.get({
        url: "/store/store/store_list",
        loadingTip: "加载中...",
        data: {
          lat: that.location.latitude,
          lng: that.location.longitude,
        },
        success: (res) => {
          that.storeList = res;
          that.storeList.forEach((item) => {
            item.store.forEach((shop) => {
              shop.distance = Number(shop.distance).toFixed(2) + "km";
            });
          });
          // that.getStoreInfo();
        },
      });
    },
    checkStore(item, shop) {
      let store_id = shop.id;
      let storeInfo = {
        item,
        shop,
      };
      uni.setStorageSync("store_id", store_id);
      uni.setStorageSync("storeInfo", storeInfo);
      uni.reLaunch({
        url: "/pages/index",
      });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.store-list {
  padding: 20rpx;
  .store-item {
    margin-bottom: 20rpx;
    padding: 20rpx 0;
    border-radius: 20rpx;
    background-color: #fff;
    .store-item-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1rpx solid #eee;
      height: 50rpx;
      padding: 0 20rpx;
    }

    text.check-store {
      margin-left: 20rpx;
      color: #007aff;
    }
    .store-item-shops {
      padding: 20rpx;
      .store-item-shop {
        
        .store-item-shop-name {
          font-weight: 600;
          margin-bottom: 10rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx 0;
          button{
            margin: 0;
          }
        }
        .store-item-shop-info {
          display: flex;
          align-items: center;
          justify-content: space-between;

          & > view {
            width: 90%;
          }
        }
        .store-item-shop-text {
          .store-item-shop-text-item {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
